<template>

    <d2-container :filename="filename" type="card"  v-loading.fullscreen.lock="fullscreenLoading">
        <div v-if="showa">
            <template slot="header">导入体验文档以xlsx方式</template>
            <!--<div class="d2-mb">-->
            <!--<el-button @click="download">-->
            <!--<d2-icon name="download"/>-->
            <!--下载演示 .xlsx 表格-->
            <!--</el-button>-->
            <!--</div>-->
            <div class="d2-mb">
                <el-upload :before-upload="handleUpload" action="default">
                    <el-button type="success">
                        <d2-icon name="file-o"/>
                        选择要导入的 .xlsx 表格
                    </el-button>
                </el-upload>
            </div>
            <el-table v-bind="table">
                <el-table-column
                        v-for="(item, index) in table.columns"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label">
                </el-table-column>
            </el-table>
            <h2>如果确认数据无误请点击确定</h2>
            <el-row>
                mession_name: <el-input name='mession_name' v-model="mession_name" placeholder="体检计划名"></el-input>
                mession_owner: <el-input name='mession_owner' v-model="mession_owner" placeholder="上传医生"></el-input>
                mession_date: <el-date-picker
                    v-model="mession_date"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
                <el-button  id='con' @click="insql" type="primary">确定</el-button>
            </el-row>
        </div>
        <p id='showa' v-if="showlink"><a v-bind:href="a" >通知书下载</a> </p>
    </d2-container>

</template>

<style>
    body {
        margin: 0;
    }
</style>

<script>
import { threepigPost } from '@/api/test_post'
export default {
  data () {
    return {
      mession_owner: '',
      mession_name: '',
      a: 'a',
      mession_date: '',
      showa: true,
      loading: false,
      content: 'hello',
      showlink: false,
      fullscreenLoading: false,
      filename: __filename,
      table: {
        columns: [],
        data: [],
        size: 'mini',
        stripe: true,
        border: true
      }
    }
  },
  methods: {
    test_disable () {
    },
    open3 () {
      this.$notify({
        title: '成功',
        message: '上传成功，请点击下文连接下载通知文件',
        type: 'success'
      })
    },
    insql () {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 500)
      console.log(this.mession_name + this.mession_owner + this.table.data)
      threepigPost({ 'mession_date': this.mession_date, 'mession_name': this.mession_name, 'mession_owner': this.mession_owner, 'table': this.table.data }).then((res) => {
        console.log(res)
        this.open3()
        this.showlink = true
        this.showa = false
        this.a = 'http://129.204.148.148:88/get_pdf/' + res
        // this.tableData3.pvalue = 'res'
        // this.Pvalue = 'Pvalue: ' + res.toString()
      }).catch((error) => {
        console.log(error)
      })
    },
    handleUpload (file) {
      console.log('1')
      this.fullscreenLoading = true
      console.log('2')
      this.$import.xlsx(file)
        .then(({ header, results }) => {
          this.table.columns = header.map(e => {
            return {
              label: e,
              prop: e
            }
          })
          console.log('3')
          this.table.data = results
          console.log('4')
        })
      console.log('5')
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 3000)
      console.log('6')
      return false
    },
    download () {
      window.location.href = 'http://fairyever.qiniudn.com/d2-admin-import-xlsx-demo.xlsx'
    }
  }
}
</script>
